<template>
  <div class="match_index">
    <el-table class="monitor_match_table" @row-click="monitorStore.savepicture" :data="monitorState.filterData" @sort-change="changesort()"
      style="max-width: 100%;" height="100%" border>
      <el-table-column prop="date" label="平台" width="60">
        <template #default="scope">
          <div>{{ monitorState.bctypesObj[scope.row.bc_type] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="赛事">
        <template #default="scope">
          <div class="flex_column">
            <div style="
                height: 16px;
                line-height: 16px;
                font-size: 11px;
                color: #8a8a8a;
              " class="hidden1">
              {{ scope.row.minfo.league_name }}
            </div>
            <div class="flex_column" style="font-size: 12px; color: #000">
              <div class="hidden1" style="height: 16px; line-height: 16px">
                {{ scope.row.minfo.home_name }}
              </div>
              <div class="hidden1" style="height: 16px; line-height: 16px">
                {{ scope.row.minfo.away_name }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="盘口" width="60">
        <template #default="scope">
          <div class="font12 bold">{{ scope.row.pk_odds_key_ch }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="指数" width="40" align="center">
        <template #default="scope">
          <div class="bold">{{ scope.row.odd.toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="24h" width="43" align="center">
        <template #header="{ column }">
          <div class="flex">
            <el-dropdown popper-class="date_popper" @command="monitorStore.handleCommand" trigger="click">
              <div class="font12">{{ monitorState.search_form.hours }}h</div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="1">1h</el-dropdown-item>
                  <el-dropdown-item :command="4">4h</el-dropdown-item>
                  <el-dropdown-item :command="24">24h</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <img src="@/assets/monitor/down-square.png" style="width: 8px; height: 8px; margin-left: 4px" alt="" />
          </div>
        </template>
        <template #default="scope">
          <div class="bold">{{ scope.row[`odd_${monitorState.search_form.hours}`].toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="涨跌" sortable="custom" width="45" align="center">
        <template #header="{ column }">
          <div class="flex">
            <div>涨跌</div>
            <img src="@/assets/monitor/down-square2.png" style="width: 8px; height: 8px; margin-left: 4px" alt="" />
          </div>
        </template>
        <template #default="scope">
          <div class="flex">
            <img v-if="scope.row[`odd_${monitorState.search_form.hours}_ratio`] > 0" src="@/assets/monitor/up.png"
              alt="" style="width: 16px; height: 16px" />
            <img v-else src="@/assets/monitor/down.png" alt="" style="width: 16px; height: 16px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="功能" width="44" align="center">
        <template #default="scope">
          <div class="flex">
            <img v-if="scope.row.collector == 0" src="@/assets/monitor/shoucang.png" alt=""
              style="width: 16px; height: 16px; cursor: pointer" @click="monitorStore.clickCollect(scope.row)" />
            <img v-if="scope.row.collector == 1" src="@/assets/monitor/shoucang-active.png" alt=""
              style="width: 16px; height: 16px; cursor: pointer" @click="monitorStore.clickCancelcollect(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const { monitorStore, monitorState } = inject('MonitorStore')

const changesort = () => {
  if (monitorState.search_form.order_by == 0) {
    monitorState.search_form.order_by = 1
  } else {
    monitorState.search_form.order_by = 0
  }
  monitorStore.getsavefilter()

}
</script>

<style lang="scss" scoped>
.match_index {
  width: 400px;
  height: 100%;
  min-width: 400px;
}

.font12 {
  font-family: AlibabaPuHuiTi_2_55;
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
</style>

<style>
.monitor_match_table {
  border: solid 1px #ebebeb;
}

.monitor_match_table .el-table__border-left-patch {
  width: 0;
}

.monitor_match_table thead tr th {
  background-color: #f8f9fa !important;
}

.monitor_match_table .el-table__body-wrapper {
  background: #fff;
}

.monitor_match_table thead tr th .cell {
  font-size: 12px;
  font-weight: 600;
  color: #000;
  padding: 0 4px;
}

.monitor_match_table tbody tr td .cell {
  font-size: 12px;
  color: #000;
  padding: 0 4px;
}

.monitor_match_table .caret-wrapper {
  display: none;
}

.date_popper {
  border-radius: 0;
}

.monitor_match_table .el-table__empty-block {
  width: 397px !important;
}
</style>